import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
import postcsspxtoviewport from 'postcss-px-to-viewport';
import svgr from "vite-plugin-svgr"

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss(), svgr()],
  resolve: {
    extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
    alias: {
      "@": "/src"
    }
  },
  css: {
    postcss: {
      plugins: [
        postcsspxtoviewport({
          unitToConvert: 'px', // Units to convert
          viewportWidth: 750, // Design width (e.g., iPhone 6/7/8)
          unitPrecision: 5, // Decimal places for converted values
          viewportUnit: 'vw', // Target viewport unit
          fontViewportUnit: 'vw', // Font-specific viewport unit
          propList: ['*'], // Properties to convert (e.g., '*')
          selectorBlackList: ['ignore-'], // Classes to ignore
          minPixelValue: 1, // Minimum value to convert
          mediaQuery: true, // Convert px in media queries
          replace: true, // Replace original value with converted one
          exclude: [/node_modules/], // Exclude specific files or folders
        }),
      ],
    },
  },
})